<template>
  <div class="home" @click="updateChatUser(groupRoomId,roomName,croupUserLists.length)">
    <div :class="'avatar-box-'+croupUserLists.length">
      <img class="img" :src="croupUser.photoUrl" v-for="croupUser in croupUserLists" :key="croupUser.id">
    </div>
    <h2>{{roomName}}</h2>
  </div>
</template>

<script>
export default {
  name: "GroupChat",
  props: {
    createTime: undefined,
    croupUserLists: [],
    groupRoomId: undefined,
    id: undefined,
    roomName: undefined,
    userId: undefined,
  },
  data(){
    return {
    }
    },
  computed: {
  },
  methods: {
    updateChatUser(id,name,num){
      let chatNow = {
        id: id,
        userName: name,
        num: num
      }
      this.$store.dispatch('UpdateChatUser',chatNow);
    },
  }
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 65px;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 10px;
  position: relative
}
.home:hover {
  cursor: pointer;
  background-color: #9fa3b0;
  border-radius: 10px;
}
.home h2{
  width: 240px;
  font-size: 200%;
  margin-top: 15px;
  margin-left: 13px;
  float: left;
}
.base-avatar-box {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
}

.base-img {
  padding: 2px;
  box-sizing: border-box;
}

.avatar-box-1 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
}

.avatar-box-1 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.avatar-box-2 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
}

.avatar-box-2 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-3 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-3 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-3 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-3 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-3 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-4 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-4 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-4 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 1px;
}

.avatar-box-4 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  right: 1px;
}

.avatar-box-4 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-4 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-5 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-5 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-5 .img:nth-of-type(1) {
  position: absolute;
  top: 16.666666666666668%;
  left: 16.666666666666668%;
}

.avatar-box-5 .img:nth-of-type(2) {
  position: absolute;
  top: 16.666666666666668%;
  right: 16.666666666666668%;
}

.avatar-box-5 .img:nth-last-child(3) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 1px;
}

.avatar-box-5 .img:nth-last-child(2) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-5 .img:nth-last-child(1) {
  position: absolute;
  bottom: 16.666666666666668%;
  right: 1px;
}

.avatar-box-6 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-6 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-6 .img:nth-of-type(1) {
  position: absolute;
  top: 16.666666666666668%;
  left: 1px;
}

.avatar-box-6 .img:nth-of-type(2) {
  position: absolute;
  top: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-6 .img:nth-of-type(3) {
  position: absolute;
  top: 16.666666666666668%;
  right: 1px;
}

.avatar-box-6 .img:nth-last-child(3) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 1px;
}

.avatar-box-6 .img:nth-last-child(2) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-6 .img:nth-last-child(1) {
  position: absolute;
  bottom: 16.666666666666668%;
  right: 1px;
}

.avatar-box-7 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-7 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-7 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-7 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-7 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-7 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-8 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-8 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-8 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 16.666666666666668%;
}

.avatar-box-8 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  right: 16.666666666666668%;
}

.avatar-box-8 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-8 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-8 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-8 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-8 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-8 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-9 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  background-color: #e8e8e8;
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-box-9 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-9 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 1px;
}

.avatar-box-9 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-of-type(3) {
  position: absolute;
  top: 1px;
  right: 1px;
}

.avatar-box-9 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-9 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-9 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-9 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}
button {
  margin-top: 20px;
  width: 50px;
  height: 50px;
}
</style>
